/* 
  目标： 使用Context来跨组价通信，让App组件-直接传数据给SonSon组件
  扩展：
    1. value属性可以传任意值
    3. state中的数据，通过value传值时，state变化，视图自动变化
    4. 多文件使用Context，注意Provider和Consumer 保证是使用同一个React.createContext();
*/
import React from 'react';
import { Son } from '../components/Son';
import { Provider } from '../MsgContext';

export default class App extends React.Component {
  state = {
    msg: 'Hello SonSon',
  };
  render() {
    return (
      // 2. 使用Provider存入数据,
      // 注意：
      // 2.1 Provider作为父组件来使用
      // 2.2 通过value（固定属性）属性来存入数据
      <Provider value={{ msg: this.state.msg, bbb: 'bbb' }}>
        <div>
          <h1>父组件</h1>
          <Son></Son>
        </div>
      </Provider>
    );
  }
}
